<template>
  <div class="v-editor-model-right-dropdown g-jc-sb">
    <div
      class="g-pd-l-8"
      @contextmenu="propertyModelContextMenu($event, valueData as ModelValue)"
    >
      <template v-if="valueData && valueData.icon">
        <img
          class="g-m-r-4 g-relative g-t-2"
          style="top: -1px; height: 16px"
          :src="valueData.icon"
        />
        <span v-if="valueData && valueData.name">{{ valueData.name }}</span>
      </template>
    </div>

    <div
      v-if="selected && !row.readonly && !isModelDisabled"
      class="g-pd-r-4"
    >
      <MDropdown
        lazy
        :loadListCallback="loadOptions"
      >
        <div>
          <img
            src="statics/icons/app/iconmore.png"
            class="g-pointer"
          />
        </div>
        <template #dropdown>
          <MDropdownMenuItem
            v-for="(item, index) in selectOptions"
            :key="index"
            @click="handleClickOption(item)"
          >
            <img
              :src="item.icon"
              style="height: 16px"
            />
            <span class="g-pd-lr-8">
              {{ locale.getTByContent(item, item.label, { en: "enLabel", zhCn: "label" }) }}
            </span>
          </MDropdownMenuItem>
        </template>
      </MDropdown>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { PropertyRow, ModelValue, AddModelItem } from "../../types";
import { ref, Ref, computed, watch, inject } from "vue";
import MDropdown from "@/common/dropdown/Dropdown.vue";
import MDropdownMenuItem from "@/common/dropdown/DropdownMenuItem.vue";
import { propertyUtil } from "../../PropertyUtil";
import { propertyModelContextMenu } from "../propertyUtil";
import { locale } from "@/util/locale";
import { useLoadAddItems } from "./useLoadOptions";

const isModelDisabled = inject("isModelDisabled") as Ref<boolean>;

/**
 * 右侧有个下拉菜单，选择模型类型
 */
const props = defineProps<{
  row: PropertyRow;
  selected?: boolean;
}>();

const valueData = computed(() => {
  return props.row.value as ModelValue;
});

const selectedModelId = ref("");
// const addModelItems = ref<AddModelItem[]>([]);

const { addModelItems, loadOptions } = useLoadAddItems(props.row);

const selectOptions = computed<AddModelItem[]>(() => {
  const data = (addModelItems.value || []).filter(Boolean);
  if (props.row.value) {
    data.unshift({ metaClass: "", label: "空", enLabel: "Null", applyStereotypes: [], icon: "" });
  }
  return data;
});

watch(
  () => props.selected,
  val => {
    if (val === false) {
      selectedModelId.value = "";
    }
  }
);

function handleClickOption(option: AddModelItem) {
  if (option.metaClass === "") {
    // TODO 删除属性
    if (valueData.value?.id) {
      propertyUtil.deletePropertyAndRefresh(props.row, valueData.value.id);
    }
  } else {
    propertyUtil.updatePropertyAndFresh(props.row, option.metaClass);
  }
}

// let loading = false;
// let loaded = false;
// async function loadOptions() {
//   const projectId = app.activeProject?.id;
//   const modelId = props.row.modelId;
//   if (!projectId || !modelId || loaded || loading) return;

//   loading = true;
//   try {
//     addModelItems.value = await modelService.getPropertyAddModelItems(projectId, modelId, props.row.key);
//     loaded = true;

//   } finally {
//     loading = false;
//   }
// }
</script>
